<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { useLocale } from '@/locale/locale';

const props = withDefaults(
  defineProps<{
    title?: string;
    titlePosition?: string;
    showConfirmBtn?: boolean;
    confirmText?: string;
    showCancelBtn?: boolean;
    cancelText?: string;
    disabled?: boolean;
    height?: string;
    background?: string;
    bodyStyle?: Record<string, any>;
    confirmBtnColor: string;
  }>(),
  {
    background: '#fff',
    titlePosition: 'center',
    showConfirmBtn: true,
    showCancelBtn: false,
    confirmBtnColor: '#269c74'
  }
);

const confirmStyle = computed(() => ({
  backgroundColor: props.confirmBtnColor,
  borderColor: props.confirmBtnColor
}));

const emit = defineEmits<{
  close: [];
  confirm: [];
  cancel: [];
}>();

const { t } = useLocale();
const popupRef = ref();
const visible = ref(false);

function open() {
  popupRef.value?.open('bottom');
  visible.value = true;
}

function close() {
  if (visible.value) {
    popupRef.value?.close();
    emit('close');
    visible.value = false;
  }
}

defineExpose({
  open: () => open(),
  close: () => {
    if (visible.value) {
      popupRef.value?.close();
      visible.value = false;
    }
  }
});

const handleMaskClick = () => {
  close();
};

const safeAreaInsets = ref(0);

onMounted(() => {
  const { safeArea, screenHeight } = uni.getWindowInfo();
  safeAreaInsets.value = screenHeight - safeArea.bottom;
});
</script>

<template>
  <uni-popup ref="popupRef" :safe-area="false" type="bottom" @mask-click="handleMaskClick">
    <view
      :style="{
        height: height ? height : 'auto',
        background: background ? background : 'none'
      }"
      class="apt-popup-scroll"
    >
      <view :style="background ? { background } : {}" class="apt-popup">
        <view :class="titlePosition == 'center' ? 'apt-popup__head' : 'apt-popup__head-left'">
          <text class="text-xl text-primary font-medium">{{ title }}</text>
          <view class="apt-popup__close-btn" @click.stop="close">
            <uni-icons type="closeempty" color="#3d3d3d" size="14" />
          </view>
        </view>
        <scroll-view
          :style="{
            height: height
              ? `calc(${height} - ${showConfirmBtn || showCancelBtn ? '109px' : '65px'} - ${safeAreaInsets}px)`
              : 'auto'
          }"
          class="relative"
          scroll-y
        >
          <view :style="bodyStyle" class="apt-popup__body">
            <slot></slot>
          </view>
        </scroll-view>
        <slot name="footer">
          <view v-if="showConfirmBtn || showCancelBtn" class="apt-popup__foot">
            <view class="apt-popup__foot-placeholder"></view>
            <view :style="{ bottom: `${safeAreaInsets}px` }" class="apt-popup__foot-inner">
              <view
                v-if="showCancelBtn"
                class="apt-popup__btn apt-popup__cancel-btn"
                @click.stop="$emit('cancel')"
              >
                {{ cancelText }}
              </view>
              <slot name="confirm">
                <view
                  v-if="showConfirmBtn"
                  :class="{ 'is-disabled': disabled }"
                  :disabled="disabled"
                  class="apt-popup__btn apt-popup__confirm-btn"
                  :style="confirmStyle"
                  @click.stop="$emit('confirm')"
                >
                  {{ confirmText || t('LLKey_loginCheckConfirm') }}
                </view>
              </slot>
            </view>
          </view>
        </slot>
        <apt-safe-area />
      </view>
    </view>
  </uni-popup>
</template>

<style lang="scss">
.apt-popup-scroll {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  max-height: 80vh;
}

.apt-popup {
  background-color: white;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  display: flex;
  flex-direction: column;
  height: 100%;

  &__head {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
    padding-top: 22px;
    position: relative;
  }

  &__head-left {
    display: flex;
    margin-bottom: 14px;
    padding-left: 13px;
    padding-top: 22px;
    position: relative;
  }

  &__close-btn {
    height: 14px;
    position: absolute;
    right: 13px;
    top: 28px;
    width: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__body {
    flex: 1;
    padding: 0 12px;
  }

  &__foot {
    position: relative;

    &-placeholder {
      height: 44px;
    }

    &-inner {
      align-items: center;
      bottom: 0;
      display: flex;
      left: 0;
      padding: 4px 12px 2px;
      position: fixed;
      right: 0;
    }
  }

  &__btn {
    align-items: center;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    color: #fff;
    display: flex;
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    height: 38px;
    justify-content: center;
    line-height: 27px;

    & + & {
      margin-left: 11px;
    }
  }

  &__confirm-btn {
    background-color: #269c74;
    border-color: #269c74;

    &.is-disabled {
      background-color: #d8d8d8;
      border-color: #d8d8d8;
      color: #fff;
    }
  }

  &__cancel-btn {
    border-color: #c4c4c4;
    color: #3d3d3d;
  }
}
</style>
